Flutter 中的文本溢出的示例

#Flutter 中的文本溢出的示例 | 来源: 网络整理| 查看: 265

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第23天，点击查看活动详情。

在 Flutter 中，Text、RichText和DefaultTextStyle小部件的溢出属性指定了如何将未显示的溢出内容通知给用户。它可以被剪裁、显示省略号（三个点）、淡入淡出或溢出到其父窗口小部件之外。

可以使用TextOverflow枚举值设置溢出属性：

TextOverflow.clip：截断内容区域边缘的文本，以便截断可以发生在字符中间。 TextOverflow.ellipsis : 显示一个省略号 ('...') 来表示剪切的文本。省略号显示在内容区域内，减少了显示的文本量。 TextOverflow.fade：剪辑溢出的内联内容，并在行框边缘附近应用淡出效果，边缘完全透明。 TextOverflow.values：此枚举中的值列表（例如，TextOverflow.values[0] 等价于TextOverflow.clip，T extOverflow.values[1] 等价于TextOverflow.fade） TextOverflow.visible：在其容器外显示溢出的文本。

TextOverflow.ellipsis和TextOverflow.fade广泛用于实际项目中。另外需要注意的是，overflow属性通常与softWrap（设置为false）和maxLines（设置为1）属性一起使用，如下所示：

Text( 'Welcome to KindaCode.com bla bla bla', style: TextStyle(fontSize: 24), softWrap: false, maxLines: 1, overflow: TextOverflow.fade, )

单词可能会令人困惑和无聊。为了更清楚起见，让我们看看下面的几个例子。

TextOverflow.clip

编码：

Scaffold( appBar: AppBar(title: const Text('KindaCode.com')), body: Padding( padding: const EdgeInsets.all(30), child: Container( child: const Text( 'Hello there. Welcome to the Moon', style: TextStyle(fontSize: 30), maxLines: 1, softWrap: false, overflow: TextOverflow.clip, ), color: Colors.grey.shade300, ), )); TextOverflow.ellipsis Scaffold( appBar: AppBar(title: const Text('KindaCode.com')), body: Padding( padding: const EdgeInsets.all(30), child: Container( child: const Text( 'Hello there. Welcome to the Moon', style: TextStyle(fontSize: 30), maxLines: 1, softWrap: false, overflow: TextOverflow.ellipsis, ), color: Colors.grey.shade300, ), )); TextOverflow.fade

编码：

Scaffold( appBar: AppBar(title: const Text('KindaCode.com')), body: Padding( padding: const EdgeInsets.all(30), child: Container( child: const Text( 'Hello there. Welcome to the Moon', style: TextStyle(fontSize: 30), maxLines: 1, softWrap: false, overflow: TextOverflow.fade, ), color: Colors.grey.shade300, ), )); TextOverflow.visible Scaffold( appBar: AppBar(title: const Text('KindaCode.com')), body: Padding( padding: const EdgeInsets.all(30), child: Container( child: const Text( 'Hello there. Welcome to the Moon', style: TextStyle(fontSize: 30), maxLines: 1, softWrap: false, overflow: TextOverflow.visible, ), color: Colors.grey.shade300, ), )); 行内的多个文本小部件

当您将多个Text小部件（与其他小部件）放在一个Row中时，您可以将您的Text小部件包装在Expanded小部件中以避免Renderflex 溢出错误：

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞══════════════════════ The following assertion was thrown during layout: A RenderFlex overflowed by 346 pixels on the right. ... ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤ ═══════════════════════════════════════════════════════════════

编码：

Scaffold( appBar: AppBar(title: const Text('KindaCode.com')), body: Container( padding: const EdgeInsets.all(30), color: Colors.yellow.shade200, child: Row( children: const [ Expanded( child: Text( 'Hello World. Some Long Text', style: TextStyle(fontSize: 24), softWrap: false, maxLines: 1, overflow: TextOverflow.fade, ), ), SizedBox( width: 10, ), CircleAvatar( backgroundColor: Colors.red, ), SizedBox( width: 10, ), Expanded( child: Text( 'This World Is So Beautiful', style: TextStyle(fontSize: 24), softWrap: false, maxLines: 1, overflow: TextOverflow.ellipsis, ), ), ], ))); 参考 TextOverflow 枚举(flutter.dev) 省略号（维基百科）文本类(flutter.dev) RichText 类(flutter.dev) 结论

我们已经学习了如何在 Flutter 中控制文本溢出。这些知识对于构建整洁、优雅和专业的用户界面非常重要。

【本文地址】

公司简介

联系我们